<div class="card">
  <div class="card-header">
    <h5 class="mb-0">库存预警</h5>
  </div>
  
  <!-- 调试信息 -->
  <div class="card-body border-bottom bg-light" *ngIf="apiError">
    <div class="alert alert-warning mb-0">
      <strong>提示：</strong> 由于API请求失败，当前显示的是模拟数据。
      <div>错误信息: {{ errorMessage }}</div>
    </div>
  </div>
  
  <!-- 搜索条件区域 -->
  <div class="card-body border-bottom">
    <form (ngSubmit)="search()">
      <div class="row mb-3">
        <div class="col-md-4">
          <div class="d-flex align-items-center">
            <label class="form-label mb-0 me-2" style="width: 80px;">商品编码:</label>
            <input type="text" class="form-control" [(ngModel)]="queryParams.GoodsCode" name="GoodsCode" 
                  placeholder="请输入商品编码">
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center">
            <label class="form-label mb-0 me-2" style="width: 80px;">商品名称:</label>
            <input type="text" class="form-control" [(ngModel)]="queryParams.GoodsName" name="GoodsName" 
                  placeholder="请输入商品名称">
          </div>
        </div>
        
        <div class="col-md-4">
          <div class="d-flex align-items-center">
            <label class="form-label mb-0 me-2" style="width: 80px;">商品类型:</label>
            <select class="form-select" [(ngModel)]="queryParams.GoodsType" name="GoodsType">
              <option *ngFor="let type of goodsTypeOptions" [value]="type">{{ type }}</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="row mb-3">
        <div class="col-md-4">
          <div class="d-flex align-items-center">
            <label class="form-label mb-0 me-2" style="width: 80px;">库存状态:</label>
            <select class="form-select" [(ngModel)]="queryParams.Status" name="Status">
              <option *ngFor="let status of statusOptions" [value]="status">{{ status }}</option>
            </select>
          </div>
        </div>
      </div>
      
      <div class="row">
        <div class="col-12 text-center">
          <button type="button" class="btn btn-secondary me-2" (click)="reset()">重置</button>
          <button type="submit" class="btn btn-primary">查询</button>
        </div>
      </div>
    </form>
  </div>
  
  <!-- 统计卡片区域 -->
  <div class="card-body border-bottom">
    <div class="row">
      <div class="col-md-3">
        <div class="card bg-light mb-0">
          <div class="card-body p-3 text-center">
            <div class="h3 text-primary">{{ statistics.totalItems || 0 }}</div>
            <div class="text-muted">商品总数</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-3">
        <div class="card bg-light mb-0">
          <div class="card-body p-3 text-center">
            <div class="h3 text-danger">{{ statistics.belowLowerItems || 0 }}</div>
            <div class="text-muted">低于下限</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-3">
        <div class="card bg-light mb-0">
          <div class="card-body p-3 text-center">
            <div class="h3 text-warning">{{ statistics.aboveUpperItems || 0 }}</div>
            <div class="text-muted">高于上限</div>
          </div>
        </div>
      </div>
      
      <div class="col-md-3">
        <div class="card bg-light mb-0">
          <div class="card-body p-3 text-center">
            <div class="h3 text-success">{{ statistics.normalItems || 0 }}</div>
            <div class="text-muted">正常库存</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 操作按钮区域 -->
  <div class="card-body border-bottom">
    <button class="btn btn-secondary me-2" type="button" (click)="exportData()">
      <i class="fa fa-download me-1"></i>导出
    </button>
    <button class="btn btn-secondary" type="button" (click)="refresh()">
      <i class="fa fa-refresh me-1"></i>刷新
    </button>
  </div>
  
  <!-- 如果没有数据显示提示 -->
  <div class="alert alert-info mt-3 mx-3" *ngIf="!loading && dataList.length === 0">
    <strong>提示：</strong> 没有找到符合条件的库存预警记录。
  </div>
  
  <!-- 加载指示器 -->
  <div *ngIf="loading" class="card-body text-center">
    <div class="spinner-border text-primary" role="status">
      <span class="visually-hidden">加载中...</span>
    </div>
    <p class="mt-2">正在加载数据，请稍候...</p>
  </div>
  
  <!-- 数据表格区域 -->
  <div class="card-body table-responsive" *ngIf="!loading && dataList.length > 0">
    <table class="table table-striped table-hover">
      <thead class="table-light">
        <tr>
          <th width="40"><input type="checkbox"></th>
          <th width="60">序号</th>
          <th>商品编码</th>
          <th>商品名称</th>
          <th>规格型号</th>
          <th>单位</th>
          <th>商品类型</th>
          <th>当前库存</th>
          <th>下限</th>
          <th>上限</th>
          <th>下限比率</th>
          <th>上限比率</th>
          <th>库存状态</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let item of dataList; let i = index">
          <td><input type="checkbox" [checked]="selectedRows.includes(item.id)" (change)="toggleSelection(item.id)"></td>
          <td>{{ item.serialNumber }}</td>
          <td>{{ item.goodsCode }}</td>
          <td>{{ item.goodsName }}</td>
          <td>{{ item.specification }}</td>
          <td>{{ item.unit }}</td>
          <td>{{ item.goodsType }}</td>
          <td>{{ item.currentStock }}</td>
          <td>{{ item.stockLowerLimit }}</td>
          <td>{{ item.stockUpperLimit }}</td>
          <td>
            <div class="d-flex align-items-center">
              <div class="progress flex-grow-1 me-2" style="height: 6px;">
                <div class="progress-bar" 
                     [ngClass]="getLowerRateColorClass(item)"
                     [style.width]="getLowerRateWidth(item)"></div>
              </div>
              <span [ngClass]="getLowerRateTextClass(item)">{{ calculateLowerRate(item) }}</span>
            </div>
          </td>
          <td>
            <div class="d-flex align-items-center">
              <div class="progress flex-grow-1 me-2" style="height: 6px;">
                <div class="progress-bar" 
                     [ngClass]="getUpperRateColorClass(item)"
                     [style.width]="getUpperRateWidth(item)"></div>
              </div>
              <span [ngClass]="getUpperRateTextClass(item)">{{ calculateUpperRate(item) }}</span>
            </div>
          </td>
          <td>
            <span class="badge" [ngClass]="{
              'bg-danger': item.belowLowerLimit === '是', 
              'bg-warning': item.aboveUpperLimit === '是', 
              'bg-success': item.belowLowerLimit === '否' && item.aboveUpperLimit === '否'
            }">
              {{ getStatus(item) }}
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <!-- 分页区域 -->
  <div class="card-footer d-flex justify-content-between align-items-center" *ngIf="!loading && dataList.length > 0">
    <div>
      共 {{ total }} 条，第 {{ pageIndex }}/{{ totalPages }} 页
    </div>
    <nav aria-label="分页导航">
      <ul class="pagination pagination-sm mb-0">
        <li class="page-item" [class.disabled]="pageIndex === 1">
          <a class="page-link" href="javascript:;" (click)="pageIndexChange(1)">首页</a>
        </li>
        <li class="page-item" [class.disabled]="pageIndex === 1">
          <a class="page-link" href="javascript:;" (click)="pageIndexChange(pageIndex - 1)">
            <span aria-hidden="true">&laquo;</span>
          </a>
        </li>
        
        <li class="page-item" *ngFor="let page of getPageRange()" 
            [class.active]="pageIndex === page">
          <a class="page-link" href="javascript:;" (click)="pageIndexChange(page)">{{ page }}</a>
        </li>
        
        <li class="page-item" [class.disabled]="pageIndex === totalPages">
          <a class="page-link" href="javascript:;" (click)="pageIndexChange(pageIndex + 1)">
            <span aria-hidden="true">&raquo;</span>
          </a>
        </li>
        <li class="page-item" [class.disabled]="pageIndex === totalPages">
          <a class="page-link" href="javascript:;" (click)="pageIndexChange(totalPages)">末页</a>
        </li>
      </ul>
    </nav>
    <div>
      <select class="form-select form-select-sm d-inline-block" style="width: auto;"
              [(ngModel)]="pageSize"
              (change)="pageSizeChange($any($event.target).value)">
        <option *ngFor="let size of [10, 20, 30, 50]" [value]="size">{{ size }}条/页</option>
      </select>
    </div>
  </div>
</div>
